<template>
  <div class="departments">
    <!-- 卡片 -->
    <!-- v-loading="loading"
      element-loading-text="拼命加载中" -->
    <div class="app-container">
      <el-card
        v-loading="loading"
        class="tree-card"
        element-loading-text="拼命加载中"
      >
        <!-- 布局 -->
        <TreeTools :node-data="company" is-root @addDepart="addDepart" />
        <!-- 树形菜单 -->
        <!-- icon-class="el-icon-user-solid" -->
        <el-tree
          :data="list"
          :props="defaultProps"
          default-expand-all
        >

          <template v-slot="{data}">
            <TreeTools
              :node-data="data"
              @getDeptList="getDeptList"
              @addDepart="addDepart"
              @editDept="editDept"
            />
          </template>
        </el-tree>
      </el-card>

      <AddDepart
        ref="dept"
        :show-dialog.sync="showDialog"
        :current-id="currentId"
        @addDept="getDeptList"
      />
    </div>
  </div>
</template>

<script>
import { getDeptList } from '@/api/dept'
import { listTotree } from '@/utils/index'
import TreeTools from './components/TreeTools.vue'
import AddDepart from './components/AddDepart.vue'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDepart
  },
  data() {
    return {
      company: {
        manager: '负责人',
        name: '江苏传智播客教育科技股份有限公司'
      },
      list: [],
      defaultProps: {
        children: 'children', // 默认可以不用写
        // 不一定是label  修改为name
        label: 'name'
      },
      loading: false,
      showDialog: false,
      currentId: ''
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    async getDeptList() {
      this.loading = true
      const res = await getDeptList()
      this.list = listTotree(res.depts)
      this.loading = false
    },
    // 添加 子传父
    addDepart(id) {
      // id  添加的时候用到给哪个添加部门
      // console.log(id)
      this.showDialog = true
      this.currentId = id
    },
    /*   close() {
      this.showDialog = false
    }, */
    // 编辑部门  子传父
    editDept(id) {
      this.showDialog = true
      this.currentId = id
      this.$refs.dept.editDept(id)
    }
  }
}
</script>

<style scoped lang="scss">

.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
::v-deep{
  // 没有子节点
      .is-leaf.el-tree-node__expand-icon{
      color:#000;
      &::before{
        content:"\e7a5"
      }
    }
    //有子节点 折叠
  .el-tree-node__expand-icon{
      color:#000;
      &::before{
        content:"\e723"
      }
  }
  //有子节点 不折叠
  .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
     &::before{
        content:"\e722"
      }
}
}
</style>
